<template>
    <div>
        <!-- 搜索框，输入教师名进行模糊查询 -->
        <el-input v-model="search" placeholder="请输入教师名" style="width: 200px; margin-bottom: 10px;"
            prefix-icon="el-icon-search" @keyup.enter.native="handleSearch">
        </el-input>

        <!-- 添加用户按钮，点击时调用 handleAdd 方法 -->
        <el-button type="primary" @click="handleAdd" style="margin-bottom: 10px;">添加教师信息</el-button>

        <!-- 教师信息表格 -->
        <el-table :data="filteredTeachers" style="width: 100%; max-width: 1400px;" stripe>
            <!-- 序号列，自动编号 -->
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>

            <el-table-column prop="teacherName" label="教师名" width="120" align="center"></el-table-column>

            <el-table-column prop="photo" label="教师图片" width="120" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.photo" alt="教师图片" style="width: 100px;height: 60px;object-fit: cover;">
                </template>
            </el-table-column>

            <el-table-column prop="title" label="教师学历" width="120" align="center"></el-table-column>

            <el-table-column prop="subject" label="教师学科" width="80" align="center"></el-table-column>

            <el-table-column prop="createdTime" label="创建时间" width="200" align="center"></el-table-column>

            <el-table-column prop="education" label="教育背景" width="250" align="center"></el-table-column>

            <el-table-column label="操作" width="320" align="center">
                <template slot-scope="scope">
                    <!-- 编辑按钮，点击时调用 handleEdit 方法 -->
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- 删除按钮，点击时调用 handleDelete 方法 -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <!-- 详情按钮，点击时调用 handleDetails 方法 -->
                    <el-button size="mini" type="info" @click="handleDetails(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5, 10, 20, 50]"
            :total="total" style="margin-top: 20px; text-align: center;">
        </el-pagination>

        <!-- 添加/编辑用户对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
            <!-- 表单组件，绑定到 form 对象 -->
            <el-form :model="form" label-width="120px">
                <el-form-item label="教师名">
                    <el-input v-model="form.teacherName" placeholder="请输入教师名"></el-input>
                </el-form-item>
                <el-form-item label="教师学历">
                    <el-input v-model="form.title" placeholder="请输入教师学历"></el-input>
                </el-form-item>
                <el-form-item label="主修学科">
                    <el-input v-model.number="form.subject" placeholder="请输入主修学科"></el-input>
                </el-form-item>
                <el-form-item label="学历背景">
                    <el-input v-model.number="form.education" placeholder="请输入教师学历背景"></el-input>
                </el-form-item>
                <el-form-item label="所教课程">
                    <el-input v-model.number="form.teachingSubjects" placeholder="请输入所教课程"></el-input>
                </el-form-item>
                <el-form-item label="教师成就">
                    <el-input v-model.number="form.achievements" placeholder="请输入教师成就"></el-input>
                </el-form-item>
                <el-form-item label="详情">
                    <el-input v-model="form.detail" placeholder="请输入教师详情介绍" type="textarea" :rows="8"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部的操作按钮 -->
            <span slot="footer" class="dialog-footer">
                <!-- 取消按钮，点击时关闭对话框 -->
                <el-button @click="dialogVisible = false">取 消</el-button>
                <!-- 确定按钮，点击时调用 handleSubmit 方法 -->
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 用户详情对话框 -->
        <el-dialog title="课程详情" :visible.sync="detailsVisible" width="40%">
            <el-descriptions title="" :column="1" border>
                <el-descriptions-item label="教师名">{{ selectedTeacher.teacherName }}</el-descriptions-item>
                <el-descriptions-item label="课程图片">
                    <img :src="selectedTeacher.photo" alt="课程图片" style="width: 100px; height: 100px;">
                </el-descriptions-item>
                <el-descriptions-item label="教师学历">{{ selectedTeacher.title }}</el-descriptions-item>
                <el-descriptions-item label="主修学科">{{ selectedTeacher.subject }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ selectedTeacher.createdTime }}</el-descriptions-item>
                <el-descriptions-item label="教育背景">{{ selectedTeacher.education }}</el-descriptions-item>
                <el-descriptions-item label="所教课程">{{ selectedTeacher.teachingSubjects }}</el-descriptions-item>
                <el-descriptions-item label="教师详情">{{ selectedTeacher.detail }}</el-descriptions-item>
                <el-descriptions-item label="教师成就">{{ selectedTeacher.achievements }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'TeacherInfo',
    data() {
        return {
            // 存储教师数据数组
            teachers: [],
            // 控制对话框的显示与隐藏
            dialogVisible: false,
            // 对话框的标题
            dialogTitle: '',
            isEditMode: false,  // 用于区分是编辑模式还是添加模式
            // 表单数据对象
            form: {
                id: '',
                teacherName: '',
                title: '',
                subject: '',
                photo: '',
                achievements: '',
                detail: '',
                createdTime: '',
                education: '',
                teachingSubjects: '',

            },
            // 当前编辑的用户索引，-1 表示新增用户
            currentIndex: -1,
            // 搜索关键字
            search: '',
            // 当前页码
            currentPage: 1,
            tempPage: 1,  // 用于输入框的临时页码
            // 每页显示的条数
            pageSize: 10,
            // 控制教师详情对话框的显示与隐藏
            detailsVisible: false,
            // 当前选中的教师
            selectedTeacher: {},
            //总得数量
            total: 0,
        };
    },
    computed: {
        // 过滤后的教师列表
        filteredTeachers() {
            return this.teachers.map(teacher => ({
                //使用 ...course 可以快速、简洁地创建一个新对象，包含原对象的所有属性，
                //同时允许你添加或覆盖某些属性。这样可以有效避免直接修改原对象，保持代码的可维护性。
                ...teacher,
            }));
        }
    },
    async mounted() {
        await this.getTeacherAll();  //挂载后调用getCourseAll方法
    },
    methods: {
        async getTeacherAll() {
            try {
                // 使用 data 中的 currentPage ,search和 pageSize
                const { currentPage, pageSize, search } = this;
                const response = await axios.get(`http://localhost:8089/teacher/getTeachersAll`, { params: { currentPage, pageSize, search } });
                const res = response.data
                console.log("ddddddddddddddddddddddcc" + res)
                // 确保响应数据符合预期格式
                if (res && Array.isArray(res.records)) {
                    this.teachers = res.records;        // 教师数据列表
                    this.total = res.total;          // 总记录数,这些数据来源于mybatis-plus中自带的分页对象 IPage 包含的信息
                    this.currentPage = res.current;  // 当前页码
                } else {
                    console.error('Unexpected response format:', res);
                    this.teachers = [];                 // 确保 teachers 为空数组
                    this.total = 0;
                }
            } catch (error) {
                console.error("获取课程数据失败！", error);
                this.teachers = [];
                this.total = 0;
            }

        },

        // 添加教师的方法
        handleAdd() {
            // 设置对话框标题为“添加课程信息”
            this.dialogTitle = '添加教师信息';
            // 设置编辑模式为 false，表示是新增课程
            this.isEditMode = false;
            // 清空表单数据
            this.form = {
                title: '', teacherName: '', subject: '', education: '',
                achievements: '', teachingSubjects: '', detail: '',

            };
            // 设置当前编辑的用户索引为 -1（表示新增）
            this.currentIndex = -1;
            // 显示对话框
            this.dialogVisible = true;
        },
        // 编辑用户的方法
        handleEdit(index, row) {
            this.dialogTitle = '编辑教师';
            // 设置编辑模式为 true，表示是编辑已有用户
            this.isEditMode = true;
            // 将当前行的数据复制到表单中
            this.form = { ...row };
            // 记录当前编辑的用户索引
            this.currentIndex = index;
            // 显示对话框
            this.dialogVisible = true;
        },
        // 搜索方法
        handleSearch() {
            // 触发搜索，重新计算过滤后的用户列表
            this.currentPage = 1;
            this.getTeacherAll();
        },
        // 分页大小改变时的处理方法
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.getTeacherAll();  // 更新获取数据
        },
        // 当前页码改变时的处理方法
        handleCurrentChange(newPage) {
            this.tempPage = newPage; //更新临时页码
            this.currentPage = newPage; //同步当前页码
            this.getTeacherAll();  // 更新获取数据
        },

        // 查看用户详情的方法
        handleDetails(index, row) {
            // 设置当前选中的用户
            this.selectedTeacher = { ...row };
            // 显示用户详情对话框
            this.detailsVisible = true;
        },
        // 提交表单的方法
        async handleSubmit() {
            if (this.currentIndex === -1) {
                //调用添加课程的异步函数
                this.addTeacher({
                    title: this.form.title,
                    teacherName: this.form.teacherName,
                    subject: this.form.subject,
                    education: this.form.education,
                    achievements: this.form.achievements,
                    teachingSubjects: this.form.teachingSubjects,
                    detail: this.form.detail
                })

            } else {
                // 如果是编辑用户，更新用户数组中的异步函数
                await this.updateTeacher({
                    id: this.teachers[this.currentIndex].id,  //对应数据库中某条课程记录的主键 id
                    title: this.form.title,
                    teacherName: this.form.teacherName,
                    subject: this.form.subject,
                    education: this.form.education,
                    achievements: this.form.achievements,
                    teachingSubjects: this.form.teachingSubjects,
                    detail: this.form.detail
                });
            }
            // 关闭对话框
            this.dialogVisible = false;
            // 重置当前页码
            this.currentPage = 1;
        },

        //添加课程异步请求
        async addTeacher(TeacherDate) {
            try {
                const response = await axios.post(`http://localhost:8089/teacher/addTeacher`, TeacherDate);
                if (response.status === 200) {
                    await this.getTeacherAll();
                    this.$message({
                        message: '教师信息添加成功',
                        type: "success",
                        duration: 1500
                    })
                }
            } catch (error) {
                this.$message({
                    message: '教师信息添加失败!',
                    type: 'error',
                    duration: 1550
                })
            }
        },
        //修改课程信息
        async updateTeacher(TeacherDate) {
            try {
                const response = await axios.put(`http://localhost:8089/teacher/updateTeacher/${TeacherDate.id}`, TeacherDate);
                if (response.status === 200) {
                    await this.getTeacherAll();
                    this.$message({
                        message: '修改成功!',
                        type: 'success',
                        duration: 2000
                    })
                }
            } catch (error) {
                this.$message({
                    message: '课程修改失败！',
                    type: 'error',
                    duration: 2000
                })
            }

        },

        //删除课程信息
        async handleDelete(index, row) {
            // 弹出确认对话框
            this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 确认删除后，从用户数组中移除该用户
                try {
                    const response = await axios.delete(`http://localhost:8089/teacher/${row.id}`); //调用后端删除接口
                    if (response.status === 200) {
                        this.teachers.splice(index, 1);
                        // 显示删除成功的消息
                        this.$message({
                            type: 'success',
                            message: '教师信息删除成功!'
                        });
                        await this.getTeacherAll(); //刷新用户列表
                    }
                } catch (error) {
                    console.error("删除课程失败！", error);
                }
            }).catch(() => {
                // 取消删除后，显示已取消删除的消息
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
}
</script>

<style scoped>
/* 基础样式 */
h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.el-input,
.el-button {
    margin-right: 10px;
}

.el-table {
    margin-top: 20px;
    width: 100%;
    max-width: 1400px;
}

.el-pagination {
    text-align: center;
}

/* 对话框样式 */
.el-dialog {
    border-radius: 10px;
}

.el-dialog__header {
    background-color: #f0f0f0;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.el-dialog__body {
    padding: 20px;
}

.el-dialog__footer {
    padding: 10px;
    border-top: 1px solid #ddd;
    text-align: right;
}

.el-form-item {
    margin-bottom: 15px;
}

.el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
}

.el-button--primary:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

/* 用户详情对话框样式 */
.el-descriptions {
    margin-top: 20px;
}

.el-descriptions-item {
    padding: 10px;
    border-bottom: 1px solid #ebebeb;
}

.el-descriptions-item:last-child {
    border-bottom: none;
}
</style>